<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的网站 — 简体中文 (zh-CN)</title>
  <meta name="description" content="这是一个简洁的中文网站模板，适合个人或小型企业展示介绍与联系信息。">
  <style>
    /* 简洁响应式样式 */
    :root{--accent:#0f62fe;--bg:#ffffff;--muted:#6b7280}
    *{box-sizing:border-box}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue","PingFang SC", "Hiragino Sans GB","Microsoft YaHei", Arial;line-height:1.6;margin:0;background:var(--bg);color:#0b1220}
    header{border-bottom:1px solid #eef2f7}
    .container{max-width:1000px;margin:0 auto;padding:24px}
    nav{display:flex;align-items:center;justify-content:space-between}
    .brand{font-weight:700;font-size:18px}
    .nav-links{display:flex;gap:14px}
    a{color:inherit;text-decoration:none}
    .cta{background:var(--accent);color:white;padding:8px 12px;border-radius:8px}

    .hero{display:grid;grid-template-columns:1fr;gap:18px;padding:40px 0}
    .hero h1{font-size:28px;margin:0}
    .hero p{color:var(--muted);margin:8px 0 0}

    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
    .card{padding:16px;border:1px solid #eef2f7;border-radius:10px;background:#fff}

    footer{margin-top:40px;padding:24px 0;border-top:1px solid #eef2f7;color:var(--muted)}

    /* 响应 */
    @media (max-width:800px){.grid{grid-template-columns:1fr}.nav-links{display:none}.hero h1{font-size:22px}}
  </style>
</head>
<body>
  <header>
    <div class="container">
      <nav>
        <div class="brand">我的网站</div>
        <div class="nav-links">
          <a href="#about">关于</a>
          <a href="#services">服务</a>
          <a href="#contact">联系</a>
          <a class="cta" href="#contact">联系我们</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <section class="container hero">
      <div>
        <h1>欢迎来到我的网站</h1>
        <p>这是一个为简体中文用户准备的简单、可自定义的单页 HTML 模板。适合个人简介、作品集或小型企业展示。</p>
        <p style="margin-top:12px"><a class="cta" href="#contact">获取免费咨询</a></p>
      </div>
      <div style="color:var(--muted)">
        <!-- 可替换为图片或插图 -->
        <svg width="100%" height="160" viewBox="0 0 600 160" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="600" height="160" rx="12" fill="#f3f7ff"/>
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#9aa7ff" font-size="20">可替换的横幅或演示图</text>
        </svg>
      </div>
    </section>

    <section id="about" class="container">
      <h2>关于我们</h2>
      <p style="color:var(--muted)">我们专注于为客户提供高质量的产品与专业服务。您可以在这里添加团队介绍、公司历史或核心价值观。</p>
    </section>

    <section id="services" class="container">
      <h2>服务项目</h2>
      <div class="grid">
        <div class="card">
          <h3>服务一</h3>
          <p style="color:var(--muted)">简短描述服务一的亮点与优势，最多两三行。</p>
        </div>
        <div class="card">
          <h3>服务二</h3>
          <p style="color:var(--muted)">简短描述服务二的亮点与优势，最多两三行。</p>
        </div>
        <div class="card">
          <h3>服务三</h3>
          <p style="color:var(--muted)">简短描述服务三的亮点与优势，最多两三行。</p>
        </div>
      </div>
    </section>

    <section id="contact" class="container" style="margin-top:28px">
      <h2>联系我们</h2>
      <p style="color:var(--muted)">有任何问题或合作意向，请填写下面的表单或通过电子邮件与我们联系。</p>
      <form action="#" method="post" style="margin-top:12px;display:grid;gap:8px;max-width:520px">
        <input type="text" name="name" placeholder="您的姓名" required style="padding:10px;border:1px solid #e6eefb;border-radius:8px">
        <input type="email" name="email" placeholder="邮箱地址" required style="padding:10px;border:1px solid #e6eefb;border-radius:8px">
        <textarea name="message" rows="5" placeholder="留言内容" style="padding:10px;border:1px solid #e6eefb;border-radius:8px"></textarea>
        <button type="submit" class="cta" style="width:140px">发送留言</button>
      </form>
    </section>
  </main>

  <footer>
    <div class="container">
      <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
        <div>© <span id="year"></span> 我的公司名 · 保留所有权利</div>
        <div style="color:var(--muted)">联系邮箱: <a href="mailto:info@example.com">info@example.com</a></div>
      </div>
    </div>
  </footer>

  <script>
    // 自动填充年份
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>
</html>
